<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>收集表单数据</title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <form @submit.prevent="demo">
                账号: <input type="text" v-model="account"> <br/>
                密码: <input type="password" v-model="password"><br/>
                性别: 
                <input type="radio" v-model="gender" value="meal">男</input> 
                <input type="radio" v-model="gender" value="femeal">女</input> <br/>
                爱好: <input type="checkbox" v-model="hobby" value="a" >A</input> 
                    <input type="checkbox"  v-model="hobby" value="b">B</input></input>
                    <input type="checkbox" v-model="hobby" value="c">C</input> <br/>
                省份: <select v-model="province">
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                </select> <br/>

                <textarea v-model="desc"></textarea> <br/>
                <input v-model="accept" type="checkbox"/> 阅读并接受<a href="#">用户协议</a> <br/>
                <button>注册</button>
            </form>
        </div> 
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                account:"",
                password:"",
                gender:"",
                hobby:[],
                province:"",
                desc:"",
                accept:""
            },
            methods:{
                demo(){
                    console.log(this._data)
                }
            }
        })
    </script>
</html> 